// import { addStaffIdcardWhiteitem, deleteStaffIdcardWhiteitem, getStaffIdcardWhitelist } from '@/api/staff'
import { addStaffIdcardWhiteitem, deleteStaffIdcardWhiteitem, editStaffIdcardWhiteitem, getStaffIdcardWhitelist } from '@/api/rate'
import type { StaffIdcardWhiteItem } from '@/api/staff/types'
import renderModal, { initModelValue, type FormModalDto } from '@/components/modal/Modal'
import type { FilterDto } from '@/render/FilterRender'
import TableRender, { renderSlotButtons, type TableRenderColumnTypes } from '@/render/TableRender'
import toNative from '@/utils/toNative'
import { confirm } from '@/utils/util'
import { validatorIdcard } from '@/utils/validators'
import { Button, message } from 'ant-design-vue'
import { Component } from 'vue-facing-decorator'
import { type VxeTableDataRow } from 'vxe-table'

@Component
export class IdCardWhite extends TableRender {
    pageTitle = '身份证白名单'
    selectedUser = [] as VxeTableDataRow[]
    totalSelect = 0
    showDetail = false


    filterConfig() {
        return {
            name: {
                name: '姓名',
                element: 'input',
            },
            idCard: {
                name: '身份证号',
                element: 'input'
            },
        } as FilterDto
    }

    tableColumnConfig(){
        return [
            {
                field: 'idCard',
                title: '身份证号',
                width: 200,
            },
            {
                field: 'name',
                title: '姓名',
            },
            {
                field: 'sex',
                title: '性别',
            },
            {
                field: 'address',
                title: '地址',
            },
            {
                field: 'birthday',
                title: '出生日期',
            },
            {
                field: 'operate',
                title: '操作',
                fixed: 'right',
                params: {
                    buttons: renderSlotButtons(this)
                },
                slots: {
                    default: 'buttons'
                // ({ row, column }: VxeColumnSlotTypes.ContentSlotParams<StaffIdcardWhiteItem>) => {
                //     return <>
                //         <ElButton type="text">修改</ElButton>
                //         <ElButton type="text" class="!text-red" onClick={this.onDelete.bind(this, row)}>删除</ElButton>
                //     </>
                // }
                }
            }
        ] as TableRenderColumnTypes<StaffIdcardWhiteItem>
    }

    formConfig = this.initFormConfig() as FormModalDto

    initFormConfig() {
        return {
            title: '修改身份信息库',
            width: '450px',
            theme: 'dark',
            show: false,
            items: {
                name: {
                    name: '姓名',
                    element: 'input',
                    required: true,
                },
                idCard: {
                    name: '身份证',
                    element: 'input',
                    required: true,
                    rules: [
                        {
                            validator: validatorIdcard,
                            message: '请输入正确的身份证号',
                            trigger: 'blur'
                        }
                    ]
                },
                isEdit: {
                    name: '是否编辑',
                    element: 'none',
                    hidden: true
                }
            },
            complete: async (e) => {
                if (e.isEdit) {
                    await editStaffIdcardWhiteitem(e)
                    message.success('修改成功')
                } else {
                    await addStaffIdcardWhiteitem(e)
                    message.success('添加成功')
                }
                this.formConfig.show = false
                this.reloadPage()
            },
            cancel: () => {
                this.formConfig.show = false
            },
            init: () => {

            }
        } as FormModalDto
    }

    async onLoadData(pageNum: number, pageSize: number, filter: {
        name: string
        idCard: string
    }) {
        const list = await getStaffIdcardWhitelist({
            pageNum,
            pageSize,
            ...filter
        })
        return list.rows
    }

    async onRowRemove(row: StaffIdcardWhiteItem) {
        await confirm('确认删除该白名单用户吗？', '提示')
        await deleteStaffIdcardWhiteitem({
            idCard: row.idCard
        })
        this.reloadPage()
        await message.success('删除成功')
    }
    onRowEdit(row: StaffIdcardWhiteItem) {
        this.formConfig.show = true
        this.formConfig.title = '修改身份信息白名单'
        initModelValue(this.formConfig, {
            ...row,
            isEdit: true
        })
    }

    async onAdd() {
        this.formConfig.show = true
        this.formConfig.title = '新增身份信息白名单'
        initModelValue(this.formConfig)
    }

    renderRightBtns() {
        return <Button type="primary" onClick={this.onAdd.bind(this)}>新增</Button>
    }
    render() {
        return (
            <>
                {super.render()}
                {renderModal(this.formConfig)}
            </>
        )
    }
}

export default toNative(IdCardWhite)
